<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>

    <title>主页</title>
    <style>
        .info-header-bar{width: 110px;
            height: 110px; margin: 0px auto; border-radius: 55px;}
        .info-header{width: 100%;
            height: 100%; border-radius: 50%;
            cursor: pointer;}
        .info-text{width: 100%;
            height: auto; padding: 6px 0px; text-align: center;line-height: 1.7;}
        .info-stat{width: 100%; height: 80px; background-color: #F6F9FD;margin-top: 30px;position: absolute;bottom: 0px;}
        .stat-ele{width: 33%;height: 80px;display:block;float: left;padding:15px;margin: 0px; line-height: 25px;text-align: center;}
        .stat-number{font-size: 16px; color: #526069;}
        .stat-text{color: #A3AFB7;}
        .config-ul>li{height: 30px;line-height: 30px;}
        .config-ul>li:hover{background-color: #F3F3F4;}

        .row1{
            height: 420px;
        }
        .row1-1{
            padding-top: 80px;
            position: relative;
        }
        #loginChart{
            padding: 60px 10px 0px 10px;
            width: 100%;
            height: 420px;
        }

    </style>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row" style="">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <div class="card row1 row1-1">
                <div class="info-header-bar">
                    <img class="info-header" src="/static/images/wjy.jpg"/>
                </div>
                <br>
                <div class="info-text" id="loginUserName"></div>
                <div class="info-text">
                    上次登录：<span id="lastLoginTime"></span>
                </div>
                <div class="info-stat">
                    <div class="stat-ele">
                        <span class="stat-number" id="loginNum">-.-</span>
                        <br/>
                        <span class="stat-text">登录</span>
                    </div>
                    <div class="stat-ele">
                        <span class="stat-number" id="messageNum">-.-</span>
                        <br/>
                        <span class="stat-text">消息</span>
                    </div>
                    <div class="stat-ele">
                        <span class="stat-number" id="logNum">-.-</span>
                        <br/>
                        <span class="stat-text">日志</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="card row1">
                <div style="height: 60px;width: 100%;line-height: 1.7;padding: 20px;text-align: center;position: absolute;z-index: 2;top: 0px;left: 0px;letter-spacing: 1px;">
                    <div class="pull-left" style="padding: 20px;">您最近一周登录情况</div>
                    <div class="pull-right">
                        <div id="loginFailNum" style="padding: 2px 30px;font-size: 25px;font-weight: 400;">-.-</div>
                        <div style="padding: 0px 30px;color: #a3afb7;">登录失败</div>
                    </div>
                    <div class="pull-right">
                        <div id="loginSuccessNum" style="padding: 2px 30px;font-size: 25px;font-weight: 400;">-.-</div>
                        <div style="padding: 0px 30px;color: #a3afb7;">登录成功</div>
                    </div>
                </div>
                <div id="loginChart"></div>
            </div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
            <div class="card row1">
                <!--1111-->
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="card">
                <!--1111-->
            </div>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="card">
                <!--1111-->
            </div>
        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--统计图-->
<script src="/static/plugin/echarts/echarts.js"></script>
<script type="text/javascript">
    $(function(){
        initInfo();
        loadLoginStat();
    });
    //获取N天后(负数就是N天前)的日期
    function getAfterNDay(n){
        return jo.formatDate(new Date().getTime() + 1000*60*60*24*n);
    }
    //加载登录统计
    function loadLoginStat(){
        var week = [];
        week.push(getAfterNDay(-6));
        week.push(getAfterNDay(-5));
        week.push(getAfterNDay(-4));
        week.push(getAfterNDay(-3));
        week.push(getAfterNDay(-2));
        week.push(getAfterNDay(-1));
        week.push(getAfterNDay(0));
        var option = {
            title: {
                text: '近一周登录数'
                ,show: false
                ,padding: 0
            },
            tooltip : {
                trigger: 'axis'/*,
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }*/
            },
            legend: {
                data:['失败', '成功']
                ,padding: 10
                ,bottom: 5
            },
            color: ['#FF4C52', '#3E8EF7'],
            toolbox: {

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '50',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : week
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'失败',
                    type:'line',
                    //stack: '次数',
                    /*areaStyle: {
                        opacity: 0.5
                    },*/
                    smooth: 0.4,
                    data:[0, 0, 0, 0, 0, 0, 0]
                },
                {
                    name:'成功',
                    type:'line',
                    //stack: '次数',
                    /*areaStyle: {
                        opacity: 0.5
                    },*/
                    smooth: 0.4,
                    data:[0, 0, 0, 0, 0, 0, 1]
                }
            ]
        };

        var myChart = echarts.init(document.getElementById('loginChart'));
        myChart.setOption(option);

        //登录成功数据
        jo.postAjax('{URL_UMS}ums/loginLog/statPersonalLoginNumDay7', {loginResult: true}, function(json){
            if(json && json.code == 0 && json.data && json.data.length > 0){
                option.series[1].data = orgStatData(week, json.data);
                myChart.setOption(option, true);
                $('#loginSuccessNum').text(sumArr(option.series[1].data));
            }
        }, true);
        //登录失败数据
        jo.postAjax('{URL_UMS}ums/loginLog/statPersonalLoginNumDay7', {loginResult: false}, function(json){
            if(json && json.code == 0 && json.data && json.data.length > 0){
                option.series[0].data = orgStatData(week, json.data);
                myChart.setOption(option, true);
                $('#loginFailNum').text(sumArr(option.series[0].data));
            }
        }, true);
    }
    //数组求和
    function sumArr(arr){
        var sum = 0;
        if(arr){
            for(var i=0;i<arr.length;i++){
                sum += jo.getDefVal(arr[i], 0);
            }
        }
        return sum;
    }
    //组织统计数据,按照时间顺序返回一个数组,为空的补0
    function orgStatData(week, data){
        var map = {};
        for(var i=0;i<data.length;i++){
            var item = data[i];
            map[jo.formatDate(item.date)] = item.num;
        }
        var arr = [];
        for(var i=0;i<week.length;i++){
            var day = week[i];
            arr.push(jo.getDefVal(map[day], 0));
        }
        return arr;
    }
    //初始化信息
    function initInfo(){
        jo.postAjax("{URL_UMS}ums/user/queryMyInfo", {}, function(json){
            if(json && json.code == "0" && json.data && json.data.length > 0){
                var personInfo = json.data[0];
                var userInfo = personInfo.userInfo;
                $("#loginUserName").text(userInfo.name);
                $("#lastLoginTime").text(jo.formatTime(userInfo.lastLoginTime));
                if(userInfo.header){
                    $("img.info-header").attr("src", URL_FS+"fs/file/image/"+userInfo.header);
                }
                $("#loginNum").text(personInfo.loginNum);//登录次数
            }
        }, true);
    }
</script>

</body>
</html>
